<template>
  <div class="CostApplyTrial">
    <group label-width="1rem" label-align="left" gutter="0">
      <cell>
        <span slot="title">报销人</span>
        <span slot="after-title">{{nickName}}</span>
        <!--<span slot="after-title" style="margin-left: 5px">部门</span>-->
        <span slot="after-title" style="margin-left: 20px">{{departmentName}}</span>
        <span slot="child" class="titleChild">{{_dateFormat(createdTime)}}</span>
      </cell>
      <cell is-link @click.native="gotoWorkOrderDetail()">
        <span slot="title">工单编号</span>
        <span slot="after-title">{{workOrderCode}}</span>
      </cell>
      <cell>
        <span slot="title">申请单号</span>
        <span slot="after-title">{{code}}</span>
      </cell>
    </group>
    <tab active-color="#43A2FE" style="margin-top: 10px" v-model="currentIndex">
      <tab-item v-for="(item, index) in costList" :key="index" :selected="index===currentIndex">
        <span>明细{{index+1}}</span>
      </tab-item>
    </tab>
    <swiper ref="swiper" :threshold="10000" :min-moving-distance="10000" v-model="currentIndex" :show-dots="false" @on-index-change="setHeight">
      <swiper-item v-for="(item, index) in costList" :key="index">
        <CostApplyDetail v-if="index==currentIndex" ref="swiper_item" :formdata="item"></CostApplyDetail>
      </swiper-item>
    </swiper>
    <group v-if="$route.query.auth == 1&&$route.query.type==1" label-width="1rem" gutter="10px" label-align="left">
      <cell class="fixedLength">
        <span slot="title">审批意见</span>
        <span slot="child">{{option}}</span>
      </cell>
    </group>
    <template v-if="$route.query.type != 1">
      <group label-width="1rem" gutter="10px" label-align="left">
        <x-textarea title="审批意见" v-model="option" :max="140" placeholder="请输入">
        </x-textarea>
      </group>
      <flexbox style="margin-top: 10px" v-if="currentIndex == (costList.length-1)">
        <flexbox-item>
          <x-button type="warn" @click.native="approval(false)">驳回</x-button>
        </flexbox-item>
        <flexbox-item style="margin-left: 0">
          <x-button type="primary" @click.native="approval(true)">通过</x-button>
        </flexbox-item>
      </flexbox>
    </template>
  </div>
</template>

<script>
  import {
    Group,
    Cell,
    CellBox,
    XInput,
    XTable,
    Flexbox,
    FlexboxItem,
    Tab,
    TabItem,
    Swiper,
    SwiperItem,
    Selector,
    XButton,
    XTextarea,
    TransferDom,
    XDialog,
    Previewer,
  } from 'vux'
  import CostApplyDetail from './costApplyDetail.vue'

  export default {
    name: "CostApplyTrial",
    components: {
      Group,
      Cell,
      CellBox,
      XInput,
      XTable,
      Flexbox,
      FlexboxItem,
      Tab,
      TabItem,
      Swiper,
      SwiperItem,
      CostApplyDetail,
      Selector,
      XButton,
      XTextarea,
      XDialog,
      Previewer,
    },
    directives: {
      TransferDom
    },
    data() {
      return {
        nickName: '',//报销人
        departmentName: '',//部门
        createdTime: '',//创建时间
        workOrderCode: '',//工单编号
        code: '',//申请单号
        costList: [],//费用列表
        currentIndex: 0,//当前费用明细
        option: '',//审批意见
      }
    },
    mounted() {
      if (this.$route.query.id) {
        this.$http.get('/expense/api/RequestForm/' + this.$route.query.id).then(res => {
            // 格式化后端数据至前端
            let object = res.data.data;
            this.id = object.id;
            this.workOrderCode = object.workOrderCode;
            this.code = object.code;
            this.option = object.option;
            this.createdTime = object.createdTime;
            this.nickName = object.requestUser && object.requestUser.nickName;
            this.departmentName = object.requestUser && object.requestUser.department && object.requestUser.department.departmentName;
            let promisesAll = []
            object.requestFormItems.forEach(item => {
              promisesAll.push(new Promise((resolveAll, rejectAll) => {
                item.subjectList = JSON.parse(item.subjectContent);
                resolveAll()
              }));
            });
            Promise.all(promisesAll).then(() => {
              this.costList = object.requestFormItems;
              //确定科目类别之再确定高度
              this.setHeight();
            })
          }
        )
      }
      else {
        this.setHeight()
      }
    }
    ,
    computed: {}
    ,
    methods: {
      // 工单界面
      gotoWorkOrderDetail() {
        let params = {code: this.workOrderCode}
        this.$http.get('/work/api/workorder', {params: params}).then(res => {
            if (res.data.data.rows.length > 0)
              this.$router.push({path: '/engineer/enWorkingOrder', query: {orderId: res.data.data.rows[0].id}})
          }
        )
      }
      ,
      //设置swapper高度
      setHeight() {
        this.$nextTick(() => {
          // this.$refs.swiper.xheight = this.$refs.swiper_item[this.currentIndex].$el.clientHeight + 'px'
          this.$refs.swiper.xheight = this.$refs.swiper_item[0].$el.clientHeight + 'px'
        })
      }
      ,
      //提交数据
      approval(index) {
        let requestFormItems = this.costList.map(item => {
          if (item.status != 1) {
            item.figure = 0;
          }
          return {id: item.id, status: item.status, figure: parseInt(item.figure)}
        });
        let params = {
          requestFormItems: requestFormItems,
          audit: {id: this.$store.state.user.userInfo.id},
          option: this.option,
          trialAmount: requestFormItems.reduce((total, item) => {
            return total + parseInt(item.figure)
          }, 0),
        }
        this.$vux.confirm.show({
          title: '提醒',
          content: '请检查数据是否填写完整，审批后无法撤回，是否确定提交？',
          onCancel: () => {

          },
          onConfirm: () => {
            this.$http.put('/expense/api/RequestForm/' + this.id + '/audit?audit=' + index, params).then(res => {
              let content = '操作完成，请悉知！'
              if (res.data.data.status == 2) {
                content = '审批完成，请悉知！'
              }
              if (res.data.data.status == 3) {
                content = '驳回完成，请悉知！'
              }
              this.$vux.alert.show({
                title: '审核结果',
                content: content,
                onShow() {
                },
                onHide: () => {
                  this.$router.go(-1)
                }
              })
            });
          }
        })
      }
      ,
    }
  }
</script>

<style lang="less">
  .CostApplyTrial {
    .fixedLength{
      .vux-cell-primary{
        flex: 0 0 auto;
      }
    }
    .weui-label {
      text-align-last: justify;
      padding-right: .2rem;
    }
    .vux-label {
      text-align-last: justify;
      padding-right: .2rem;
    }
    .weui-cells{
      line-height: 1.3em;
    }
    .weui-cell {
      line-height: 1.5em;
      padding: 5px 10px;
    }
    .weui-input{
      line-height: 1.5em;
      height: 1.5em;
    }
    .titleChild {
      font-size: 13px;
      position: relative;
      bottom: -5px;
    }
    .colorBlue {
      color: #43A2FE;
    }
    .flex-table {
      overflow: auto;
      background: #fff;
    }
    .imgBox {
      width: 80px;
      height: 100%;
      padding: 10px 5px;
      text-align: center;
      > img {
        width: 70px;
      }
    }
    .vux-table {
      line-height: 30px;
    }
    .vux-x-textarea {
      .weui-cell__bd {
        padding: 2px;
        border: 0.01rem solid #E5E5E5;
        border-radius: 5px;
      }
    }
    .weui-cell_select .weui-cell__bd:after {
      border-color: #3FBCFC;
      right: 22px;
      border-width: 0 2px 2px 0;
    }
    .vux-flexbox {

      .vux-flexbox-item {
        border-radius: 0%;
        .weui-btn_primary {
          background: #43A2FE;
        }
        .weui-btn_warn {
          background: #E05163;
        }
        .weui-btn {
          border-radius: 0;
        }
      }
    }
  }
</style>
